import { useState } from 'react';
import { flushSync } from 'react-dom';
import ItemHeight from '../ItemHeight';

const RequestLading = ({ props }) => {
  const { hasNextPage = false, hasLastPage = false, getNextData = () => {}, getLastData = () => {} } = props;

  const [requestLoading, setRequestLoading] = useState(false);

  const loadMoreFn = async (direction: 'next' | 'last') => {
    // return;
    if (requestLoading) return;
    flushSync(() => {
      setRequestLoading(true);
    });
    if (direction === 'next' && hasNextPage) {
      await getNextData();
    } else if (direction === 'last' && hasLastPage) {
      await getLastData();
    }
    setRequestLoading(false);
  };

  return <ItemHeight props={{ loadMoreFn, ...props }} />;
};
export default RequestLading;
